<template>

    <el-dialog
        v-model="props.dialogVisible"
        title="设置"
        width="70%"
        @open="open"
        :before-close="close"
    >
        <el-form label-width="auto" style="max-width: 600px">
            <el-form-item label="比例">
                <el-input v-model="scale">
                    <template #append>%</template>
                </el-input>
            </el-form-item>
        </el-form>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close()">关闭</el-button>
                <el-button type="primary" @click="submit()">立即设置</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {edit} from "/@/api/backend/extend";
import Template from "/@/lang/backend/en/sms/template";
import {ElMessage} from "element-plus";

const scale = ref()
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    row: {
        type: Object,
        default: {}
    },
})

const open = () => {
    scale.value = props.row.scale

}
const submit = () => {

    if (scale.value == '') {
        ElMessage.error('请输入比例')
        return
    }

    if (scale.value < 1 || scale.value > 30) {
        ElMessage.error('比例范围为1-30%')
        return
    }

    edit({id: props.row.id, scale: scale.value}).then(res => {
        if (res.code == 1) {
            ElMessage.success('设置成功')
            close()
            return
        }
        ElMessage.error(res.msg)
    })
}
const emit = defineEmits(['close'])
const close = () => {
    emit('close')
}

</script>
